<template>
	<view>
		<view>
			<!-- 最上面的搜索框 -->
			<view style="background-color: white;padding:20rpx;padding-bottom: 0;">
				<u-search inputAlign="center" placeholder="名称/手机号/税号" @search="search" v-model="form.text"
					:showAction="false"></u-search>
			</view>
			<view>
				<u-tabs-swiper ref="uTabs" :list="[{name:'待开票'},{name:'已开票'}]" :current="current" @change="tabsChange"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<view>
				<u-dropdown ref="uDropdown" @open="open" @close="close">
					<u-dropdown-item v-model="form.fplx" :title="fplxTitle" style="color: red;" :options="fplx_list">
					</u-dropdown-item>
					<!-- <u-dropdown-item v-model="form.invoice_type" :title="invoice_typeTitle"
						:options="fplx_list"></u-dropdown-item> -->
					<u-dropdown-item v-model="form.invoice_status" :title="invoice_statusTitle"
						:options="invoice_status_list"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<scroll-view scroll-y style="width: 100%;padding-bottom: 20rpx;height: 100%;height: calc(100vh - 100rpx);"
			v-if="form.kpzt==0" :refresher-threshold="100" @scrolltolower="onreachBottom" :refresher-enabled="true"
			@refresherpulling="onPulling" refresher-enabled="true" :refresher-triggered="triggered">
			<u-card padding="20" box-shadow="2rpx 2rpx 5rpx #EEEDED" v-for="item in data">
				<view slot="head" style="display: flex;justify-content: space-between;">
					<view style="font-weight: bold;color: #000;">
						<text v-if="item.fplx==1">数电普通发票</text>
						<text v-if="item.fplx==2">数电专用发票</text>
					</view>
					<view class="currency">{{item.je}}</view>
				</view>
				<view slot="body" style="width: 100%;">
					<view style="color: #909399;width: 100%;">
						<view>
							<text>税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</text>
							<text>{{item.sh}}</text>
						</view>

						<view style="margin-top: 10rpx;display: flex;">
							<text>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</text>
							<text class="ellipsis">{{item.mc}}</text>
						</view>
						<view style="margin-top: 10rpx">
							<text>客户姓名：</text>
							<text>{{item.khxm}}</text>
						</view>
						<view style="margin-top: 10rpx">
							<text>手&nbsp;机&nbsp;&nbsp;号：</text>
							<text>{{item.sjh}}</text>
						</view>

						<view style="margin-top: 10rpx">
							<text>申请单号：</text>
							<text>{{item.kpsq_num}}</text>
						</view>

						<view style="margin-top: 10rpx;display: flex;width: 100%;" v-if="item.orders.length>0">
							<text style="white-space: nowrap;">订单号：</text>
							<view style="width: 100%;display: flex;justify-content: space-between;">
								<text style="color: #2979ff;font-weight: bold;"
									@click="toOrdersInfoPage(item.orders[0].orders_id)">{{item.orders[0].orders_num}}</text>
								<text style="white-space: nowrap;"
									v-if="item.orders.length>1">等{{item.orders.length}}个订单</text>
							</view>
						</view>
						<view style="margin-top: 10rpx;" class="ellipsis">
							<text>申&nbsp;请&nbsp;&nbsp;人：</text>
							<text >{{item.employe_name}}</text>
							<text style="margin-left: 30rpx;" >{{$u.timeFormat(item.tjsj,'yyyy-mm-dd hh:MM')}}</text>
						</view>
						<view style="margin-top: 10rpx;display: flex;width: 100%;" v-if="item.invoiceInfoList.length>0">
							<text style="white-space: nowrap;">发票号：</text>
							<view style="width: 100%;display: flex;justify-content: space-between;">
								<text>
									{{item.invoiceInfoList[0].invoice_no}}
								</text>
								<text style="white-space: nowrap;"
									v-if="item.invoiceInfoList.length>1">等{{item.invoiceInfoList.length}}张发票</text>
							</view>
						</view>
					</view>
				</view>
				<view slot="foot">
					<view style="display: flex;gap: 20rpx;justify-content: space-between;" v-if="form.kpzt==0">
						<u-button size="mini" type="primary" @click="toKpsqXqPage(item.kpsq_id)">申请详情</u-button>
						<u-button size="mini" type="primary" @click="bohuishenqing(item.kpsq_id)">驳回申请</u-button>
						<u-button size="mini" type="primary" @click="toEditKpsqPage(item.kpsq_id)">编辑申请</u-button>
						<u-button size="mini" type="primary" @click="toLijiKaiPiao(item.kpsq_id)">立即开票</u-button>
					</view>
					<view style="display: flex;gap: 20rpx;justify-content: space-between;" v-if="form.kpzt==1">
						<u-button size="mini" type="primary" @click="alertZuofei(item.invoice_id)">作废</u-button>
						<u-button size="mini" type="primary" @click="toLijiKaiPiao(item.kpsq_id)">重开</u-button>
						<u-button size="mini" type="primary" @click="toShowPDF(item.invoiceInfoList[0].file_url)"
							v-if="item.invoiceInfoList.length>0&&item.invoiceInfoList[0].file_url">打开</u-button>

					</view>
				</view>
			</u-card>
		</scroll-view>
		<scroll-view scroll-y style="width: 100%;padding-bottom: 20rpx;height: 100%;height: calc(100vh - 100rpx);"
			v-if="form.kpzt==1" :refresher-threshold="100" @scrolltolower="onreachBottom" :refresher-enabled="true"
			@refresherpulling="onPulling" refresher-enabled="true" :refresher-triggered="triggered">
			<u-card padding="20" box-shadow="2rpx 2rpx 5rpx #EEEDED" v-for="item in data">
				<view slot="head" style="display: flex;justify-content: space-between;">
					<view style="font-weight: bold;color: #000;">
						<text v-if="item.invoice_type==1">数电普通发票</text>
						<text v-if="item.invoice_type==2">数电专用发票</text>
						<u-tag v-if="item.invoice_status==2" size="mini" text="已作废" mode="dark" type="error" style="margin-left: 10rpx;" />
					</view>
					<view class="">{{item.total_amount}}</view>
				</view>
				<view slot="body" style="width: 100%;">
					<view style="color: #909399;width: 100%;">
						<view>
							<text>税&nbsp;&nbsp;&nbsp;号：</text>
							<text>{{item.buyer_code}}</text>
						</view>
						<view style="margin-top: 10rpx;display: flex;">
							<text>名&nbsp;&nbsp;&nbsp;称：</text>
							<text class="ellipsis">{{item.buyer_name}}</text>
						</view>
						<view style="margin-top: 10rpx;display: flex;">
							<text>客&nbsp;&nbsp;&nbsp;户：</text>
							<view style="display: flex;justify-content: space-between;gap: 30rpx;">
								<text v-if="item.kpsq&&item.kpsq.khxm">{{item.kpsq.khxm}}</text> 
								<text v-if="item.kpsq&&item.kpsq.sjh">{{item.kpsq.sjh}}</text>
							</view>
						</view>
						<view style="margin-top: 10rpx">
							<text>销售方：</text>
							<text>{{item.unit_name}}</text>
						</view>

						<view style="margin-top: 10rpx;" class="ellipsis">
							<text>申请人：</text>
							<text v-if="item.kpsq">{{item.kpsq.employe_name}}</text>
							<text style="margin-left: 30rpx;" v-if="item.kpsq">{{$u.timeFormat(item.kpsq.tjsj,'yyyy-mm-dd hh:MM')}}</text>
						</view>
						<view style="margin-top: 10rpx;display: flex;" class="ellipsis">
							<text>开票人：</text>
							<text>{{item.employe_name}}</text>
							<text style="margin-left: 30rpx;" v-if="item.invoice_date">{{$u.timeFormat(item.invoice_date,'yyyy-mm-dd')}}</text>
						</view>

						<view style="margin-top: 10rpx;display: flex;width: 100%;" v-if="item.orders.length>0">
							<text style="white-space: nowrap;">订单号：</text>
							<view style="width: 540rpx;display: flex;justify-content: space-between;" class="ellipsis">
								<text style="color: #2979ff;font-weight: bold;width: 410rpx;" class="ellipsis"
									@click="toOrdersInfoPage(item.orders[0].orders_id)">{{item.orders[0].orders_num}}</text>
								<text style="white-space: nowrap;"
									v-if="item.orders.length>1">等{{item.orders.length}}个订单</text>
							</view>
						</view>
						<view style="margin-top: 10rpx">
							<text>发票号：</text>
							<text v-if="item.invoice_no">{{item.invoice_no}}</text>
						</view>
					</view>
				</view>
				<view slot="foot">
					<view style="display: flex;gap: 20rpx;justify-content: space-between;" v-if="form.kpzt==0">
						<u-button size="mini" type="primary" @click="toKpsqXqPage(item.kpsq_id)">申请详情</u-button>
						<u-button size="mini" type="primary" @click="bohuishenqing(item.kpsq_id)">驳回申请</u-button>
						<u-button size="mini" type="primary" @click="toEditKpsqPage(item.kpsq_id)">编辑申请</u-button>
						<u-button size="mini" type="primary" @click="toLijiKaiPiao(item.kpsq_id)">立即开票</u-button>
					</view>
					<view style="display: flex;gap: 20rpx;justify-content: space-between;" v-if="form.kpzt==1">
						<u-button size="mini" type="primary" @click="alertZuofei(item.invoice_id)" v-if="employe.employe_id==item.employe_id">作废</u-button>
						<u-button size="mini" type="primary" @click="toLijiKaiPiao(item.kpsq_id)" v-if="employe.employe_id==item.employe_id">重开</u-button>
						<u-button size="mini" type="primary" @click="toShowPDF(item.file_url)"
							v-if="item.file_url">打开</u-button>

						<!-- <u-button size="mini" type="primary" @click="sendInvoiceEmail(item.invoice_id)"
							v-if="item.file_url&&item.kpsq&&item.kpsq.yx">发送邮件</u-button> -->
					</view>
				</view>
			</u-card>
		</scroll-view>
		<u-toast ref="uToast"></u-toast>
		<myModal ref="myModal"></myModal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				employe:{},
				fplx_list: [{
					label: '全部',
					value: ''
				}, {
					label: '数电普通发票',
					value: 1
				}, {
					label: '数电专用发票',
					value: 2
				}],
				invoice_status_list: [{
					label: '全部',
					value: ''
				}, {
					label: '正常',
					value: 1
				}, {
					label: '已作废',
					value: 2
				}],
				fplxTitle: '发票类型',
				invoice_typeTitle: '发票类型',
				invoice_statusTitle: '发票状态',
				host: 'https://cos2.ksmeilv.com',
				triggered: false,
				current: 0,
				swiperCurrent: 0,
				data: [],
				count: 0,
				form: {
					page: 1,
					limit: 10,
					kpzt: 0,
					invoice_status: '',
					invoice_type: '',
					fplx: ''
				}
			}
		},
		onLoad() {
			if(uni.getStorageSync('employe')){
				this.employe=JSON.parse(uni.getStorageSync('employe'));
				console.log(this.employe.company_id);
			}
		},
		mounted() {
			this.getData();
			
		},
		methods: {
			bohuishenqing(kpsq_id) {
				var that = this;
				uni.showModal({
					content: '确定驳回申请吗？',
					title: '提示',
					showCancel: true,
					success(e) {
						if (e.confirm) {
							that.$http.get('/kpsq/cancelKpsq?kpsq_id=' + kpsq_id, {}, (res) => {
								if (res.data.success) {
									that.$refs.uToast.show({
										title: '成功',
										type: "success"
									});
									that.form.page = 1;
									that.data = [];
									that.getData();
								} else {
									that.refs.myModal.show('请求失败', res.data.result.message);
								}
							});
						}
					}
				})
			},
			sendInvoiceEmail(invoice_id) {
				var that = this;
				that.$http.get('/invoiceInfo/sendInvoiceEmail?invoice_id=' + invoice_id, {}, (res) => {
					if (res.data.success) {
						that.$refs.uToast.show({
							title: '成功',
							type: "success"
						});
					} else {

						that.$refs.myModal.show('请求失败', res.data.result.message || res.data.message);
					}
				});
			},
			toOrdersInfoPage(orders_id) {
				uni.navigateTo({
					url: '/pages/ordersInfo/ordersInfo?orders_id=' + orders_id
				});
			},
			toEditKpsqPage(kpsq_id) {
				uni.navigateTo({
					url: '/pages/bianjifapiao/bianjifapiao?kpsq_id=' + kpsq_id
				})
			},
			toKpsqXqPage(kpsq_id) {
				uni.navigateTo({
					url: '/pages/kpsqxq/kpsqxq?kpsq_id=' + kpsq_id
				})
			},
			toLijiKaiPiao(kpsq_id) {
				uni.navigateTo({
					url: '/pages/lijikaipiao/lijikaipiao?kpsq_id=' + kpsq_id
				})
			},
			toShowPDF(file_url) {
				var that = this;
				uni.navigateTo({
					url: '/pages/showPDFPage/showPDFPage?url=' + (that.host + file_url)
				})
			},
			alertZuofei(invoice_id) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定作废吗？',
					cancelText: '再想想',
					confirmText: '确定作废',
					success(e) {
						if (e.confirm) {
							that.$http.get('/invoiceInfo/cancelInvoice?invoice_id=' + invoice_id, {}, (res) => {
								if (res.data.success) {
									that.form.page = 1;
									that.data = [];
									if (that.form.kpzt == 0) {
										that.getData();
									} else if (that.form.kpzt == 1) {
										that.getInvoiceData();
									}
								} else {
									that.$refs.myModal.show('请求失败', res.data.result.message);
								}
							});
						}
					}
				})
			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				// this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				if (index == 0) {
					if (this.form.fplx == 1) {
						this.form.invoice_type = 1;
						this.fplxTitle = '数电普通发票';
					} else if (this.form.fplx == 2) {
						this.form.invoice_type = 2;
						this.fplxTitle = '数电专用发票';
					} else {
						this.form.invoice_type = '';
						this.fplxTitle = '发票类型';
					}
				}
				// if(index==1){
				// 	if(this.form.invoice_type==1){
				// 		this.invoice_typeTitle='数电普通发票';
				// 	}else if(this.form.invoice_type==2){
				// 		this.invoice_typeTitle='数电专用发票';
				// 	}else{
				// 		this.invoice_typeTitle='申请发票类型';
				// 	}
				// }
				if (index == 1) {
					if (this.form.invoice_status == 1) {
						this.invoice_statusTitle = '正常';
					} else if (this.form.invoice_status == 2) {
						this.invoice_statusTitle = '已作废';
					} else {
						this.invoice_statusTitle = '发票状态';
					}
				}
				this.form.page = 1;
				this.data = [];
				if (this.form.kpzt == 0) {
					this.getData();
				} else if (this.form.kpzt == 1) {
					this.getInvoiceData();
				}
				
				// this.$refs.uDropdown.highlight(index);
			},
			tabsChange(idx) {
				this.form.invoice_status='';
				this.form.invoice_type='';
				this.invoice_statusTitle='发票状态'
				this.fplxTitle='发票类型';
				this.invoice_typeTitle='发票类型';
				
				this.current = idx;
				this.swiperCurrent = idx;
				this.form.kpzt = idx;
				this.form.page = 1;
				this.data = [];
				if (this.form.kpzt == 0) {
					this.getData();
				} else if (this.form.kpzt == 1) {
					this.getInvoiceData();
				}

			},
			onreachBottom() {
				this.form.page++;
				if (this.form.kpzt == 0) {
					this.getData();
				} else if (this.form.kpzt == 1) {
					this.getInvoiceData();
				}
			},
			getData() {
				var that = this;
				that.$http.post('/kpsq/ListByEntity', that.form, (res) => {
					uni.stopPullDownRefresh();
					if (res.data.success) {
						that.triggered = false;
						that.data = that.data.concat(res.data.result.list);
						that.count = res.data.result.list.length;
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			getInvoiceData() {
				var that = this;
				that.$http.post('/invoiceInfo/ListByEntity', that.form, (res) => {
					uni.stopPullDownRefresh();
					if (res.data.success) {
						that.triggered = false;
						that.data = that.data.concat(res.data.result.list);
						that.count = res.data.result.list.length;
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},

			onPulling(e) {
				console.log(this.form.kpzt);
				if (this.triggered) {
					return;
				}
				this.form.page = 1;
				this.triggered = true;
				this.data = [];
				if (this.form.kpzt == 0) {
					this.getData();
				} else if (this.form.kpzt == 1) {
					this.getInvoiceData();
				}
			},
			search() {
				this.form.page = 1;
				this.data = [];
				if (this.form.kpzt == 0) {
					this.getData();
				} else if (this.form.kpzt == 1) {
					this.getInvoiceData();
				}
			},

		}
	}
</script>

<style>
	page {
		/* background-color: #EDEDED; */
	}

	.currency::before {
		content: "￥";
		color: #000;
		font-weight: bold;
	}

	.currency {
		color: #000;
		font-weight: bold;
	}

	.ellipsis {
		overflow: hidden;
		/* 溢出隐藏 */
		white-space: nowrap;
		/* 不换行 */
		text-overflow: ellipsis;
		/* 文本溢出显示省略号 */
	}
</style>